  <div>
    <h2>预处理器<i> loaders</i></h2>
    <h3>loaders 简介</h3>
    <ul>
      <li>
        Webpack 中一切皆模块，我们可以像加载 JS 文件那样，去加载任何后缀名的文件
      </li>
      <li>
        loader 本身<span>是一个函数</span>，4.0 以前，输入输出都必须为字符串，4.0之后，loader 也同时支持抽象语法树（AST）。loader 可以是链式的，我们可以对一种资源设置多个 loader，第一个 loader 的输入是文件源码，之后所有的 loader 输入都为上一个 loader 的输出。如果是最后一个 loader，则结果将直接送到 Webpack进行后续处理
      </li>
      <li>
        Webpack 本身只认识 Javascript,对于其他类型资源必须转移，输出为 Webpack能够认识的形式再继续执行，因此 loader实际上做的是一个预处理的工作
      </li>
    </ul>

    <h3>loaders 配置</h3>
    <ul>
      <li>
        与 loader 相关的配置都在 module 对象中其中 module.rules 代表了模块的处理规则。
      </li>
      <li>
        test 为匹配文件的格式，use 可接受一个数组，数组包含使用额 loader,当只有一个 loader 时，可以简化为字符串
      </li>
      <li>
        链式 loader从后向前解析，将资源最终交给最后的 loader去处理
      </li>
      <li>
        loader.options: loader 作为预处理器经常会给开发者提供一些配置项，在引入 loader 的时候可以通过 options 传入
      </li>
      <li>
        exclude,include。包含，排除。同时存在时 exclude优先级更高
      </li>
      <li>
        enforce: 配置 pre 代表此 loader 将在所有正常 loader 之前执行
      </li>
    </ul>

    <h3>常用 loader 介绍</h3>
    <ul>
      <h4>babel-loader</h4>
      <li>
        babel-loader 能够让我们在工程中使用最新的语言特性，<span>甚至还在提案中的</span>。同时不必特别关注这些特性在不同平台的兼容性问题
      </li>
      <li>配置时需注意：exclude /node_modules/</li>
      <li>
        babel-loader 本身为我们添加了 cacheDirectory 配置项，他会启用缓存机制，在重复打包未改变过的模块时放置二次编译。同样会加快打包速度。这个值可以接收一个路径，<span>也可以设置为 true.</span>。
      </li>
      <li>
        设置@babel/preset-env 的 modules 配置项为 false。防止 tree-shaking 特性失效
      </li>
      <h4>ts-loader</h4>
      <li>
        ts-loader 本身的配置并不在 ts-loader 中，而是必须要放在工程目录下的 tsconfig.js 中
      </li>
      <h4>html-loader</h4>
      <li> 
        html-loader 用于将 HTML 文件转化为字符串并进行格式化
      </li>
      <h4>file-loader </h4>
      <li>
          用于打包文件类型的资源，<span>并返回其 publicPath</span>
      </li>
      <li>
        file-loader也支持配置文件名以及 publicPath（<span>这里的 publicPath会覆盖 output.publicPath</span>）,通过 options 传入
      </li>
      <h4>url-loader</h4>
      <li>
        与 file-loader类似，唯一不同的是<span>用户可以设置一个阈值(limit)，文件大小大于它时与 file-loader 一样返回 publicPath,而小于该阈值时则返回文件 base64 形式的编码</span>
      </li>
    </ul>
</div>